// pages/mine/CompanyStar/CompanyStar.js
import WeCropper from '../../../we-cropper/we-cropper.js';

const app = getApp();
const device = wx.getSystemInfoSync();
const width = device.windowWidth;
const height = device.windowHeight;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    logo_url: '',
    // 按钮显示
    tailor_show: true,
    //裁剪后的图片
    img_url: '',
    img_base64: '',
    checkbox: {
      anchor_logo: '',
      img_url: '',
      anchor_name: ''
    },
    img_logo: 'https://www.zhibohome.net/images/CompanyHome/gsjs_mrtb.png',
    list: [
      {
        anchor_logo: '',
        img_url: '',
        anchor_name: ''
      },
    ],
    // 裁剪图片
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300,
      }
    },
    index: '',
    addindex: 0,
    runbtn: true
  },
  //点击图片 吊起根据
  click_logo(e) {
    let that = this;
    that.setData({
      tailor_show: false,
      index: e.currentTarget.dataset.index
    })
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  btnNaem(e) {
    var index = e.currentTarget.dataset.index
    var name = "list[" + index + "].anchor_name";
    this.setData({
      [name]: e.detail.value
    })
  },
  doubleTap(e) {
    if (this.data.list[this.data.addindex].anchor_logo == '') {
      wx.showToast({
        title: '请上传头像',
        icon: 'none',
      })
    } else if (this.data.list[this.data.addindex].anchor_name == '') {
      wx.showToast({
        title: '请输入主播名称',
        icon: 'none',
      })
    } else if (this.data.runbtn) {
      this.data.runbtn = false;
      wx.showToast({
        title: '上传中',
        icon: 'loading',
        duration: 20000
      })
      var that = this;
      console.log(that.data.list)
      var datalist = JSON.stringify(that.data.list)
      wx.request({
        method: 'POST',
        url: app.globalData.url + 'api/company/star/anchor',
        data: {
          token: app.globalData.token,
          anchor: datalist
        },
        success: function (data) {
          if (data.data.code == '0') {
            that.data.runbtn = true;
            wx.navigateBack({
              delta: 1,
            })
          }
        }
      });
    }

  },
  //选择 裁剪图片
  click_close: function (e) {
    this.setData({
      tailor_show: true,
    });
  },
  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },
  getCropperImage(e) {
    var index = this.data.index;
    wx.showLoading({
      title: '加载中~',
      icon: "none",
    })
    let that = this;
    this.wecropper.getCropperImage((src) => {
      if (src) {
        var image_base64 = wx.getFileSystemManager().readFileSync(src, "base64");
        var str = "list[" + index + "].img_url";
        var logo = "list[" + index + "].anchor_logo"
        that.setData({
          [str]: src,
          [logo]: image_base64 + '',
          tailor_show: true,
        });
        that.init();
        wx.hideLoading();
      } else {
        console.log('获取图片地址失败，请稍后重试')
      }

    });
  },
  uploadTap() {
    const self = this;

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        const src = res.tempFilePaths[0]
        //  获取裁剪图片资源后，给data添加src属性及其值
        self.wecropper.pushOrign(src)
      }
    })
  },
  //裁剪图片 初始化
  init: function () {
    const {
      cropperOpt
    } = this.data

    new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
        console.log(`wecropper is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) => {
        console.log(`before picture loaded, i can do something`)
        console.log(`current canvas context:`, ctx)
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        console.log(`picture loaded`)
        console.log(`current canvas context:`, ctx)
        wx.hideToast()
      })
      .on('beforeDraw', (ctx, instance) => {
        console.log(`before canvas draw,i can do something`)
        console.log(`current canvas context:`, ctx)
      })
      .updateCanvas()
  },
  add() {
    var index = this.data.addindex;
    var json = this.data.list[index].anchor_logo;
    var jsonName = this.data.list[index].anchor_name;
    if (json == '') {
      wx.showToast({
        title: '请上传头像',
        icon: 'none',
      })
    } else if (jsonName == '') {
      wx.showToast({
        title: '请输入主播名称',
        icon: 'none',
      })
    } else {
      var cb = this.data.list;
      cb.push(this.data.checkbox);
      var that = this;
      that.setData({
        list: cb
      })
      that.data.addindex++;
    }

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.init();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})